<html> 
 
<head> 
<title>021 | Normal map | J3D</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<script type="text/javascript" src="../build/j3d.js"></script>

<script>
	var mx = 0, my = 0;
	var head, camera, sun;
    var shader;
	
	function init() {
		if(!checkWebGL()) return;

		engine = new J3D.Engine();

        J3D.Loader.loadGLSL("shaders/Normalmap.glsl", function(s) {
			shader = s;
			setup();
		});
    }

    function setup() {
		J3D.Loader.loadJSON("models/021/head.json", function(jsmeshes) {
			J3D.Loader.loadJSON("models/021/headScene.json", function(jsscene) {
                jsscene.path = "models/021/";
				J3D.Loader.parseJSONScene(jsscene, jsmeshes, engine);

				head = engine.scene.find("head");

                //head.renderer = J3D.BuiltinShaders.fetch("Phong");
                //head.renderer.color = J3D.Color.red;

                head.renderer = shader;
                head.renderer.colorMap = new J3D.Texture("models/021/colour.jpg");
                head.renderer.normalMap = new J3D.Texture("models/021/normal.jpg");
                head.renderer.specMap = new J3D.Texture("models/021/spec.jpg");
                head.renderer.shininess = 4;
                head.renderer.bumpDensity = 128;
                head.renderer.bumpSize = 0.15;

                camera = engine.scene.find("camera");
                sun =  engine.scene.find("camera");

				draw();
			})
		});

		document.onmousemove = onMouseMove;
	}
	
	function onMouseMove(e) {
		mx = e.clientX;
		my = e.clientY;
	}
	
	function draw() {

        head.rotation.y += J3D.Time.deltaTime / 2000;

		engine.render();
        requestAnimationFrame(draw);
	}
		
</script>

</head> 

<body onload="init();">
	<script>
		setLabels("021. Normalmap", "Rendering a model with a normal map (in progress).<br>Model from <a href='http://www.ten24.info/index.php/shop/3d-head-scans/free-3d-head-scan-model-52/'>Ten24<a/>");
	</script>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body> 

</html> 